<template>
    <nav>
        <div class="nav-container">
            <div class="nav-toggle-button" @click="toggle"></div>

            <div class="navigation">
                <a-breadcrumb>
                    <a-breadcrumb-item>实例管理</a-breadcrumb-item>
                    <a-breadcrumb-item>详情</a-breadcrumb-item>
                    <a-breadcrumb-item>日志级别</a-breadcrumb-item>
                </a-breadcrumb>
            </div>
        </div>

        <div class="quick-button-group">
            <span>当前环境: 生产</span>
            <div class="notification">
                <img src="@/assets/img/notification@1x.png" />
            </div>
            <div class="logout">
                <img src="@/assets/img/logout@1x.png" />
            </div>
        </div>
    </nav>
</template>

<script>
    export default {
        name: 'HeaderBar',
        methods: {
            toggle() {
                this.$store.commit('navigator/toggle');
            },
        },
    };
</script>

<style lang="scss" scoped>
    nav {
        height: 64px;
        background: #FFF;
        box-shadow: 0 1px 4px 0 rgba(0, 21, 41, .12);

        .nav-container {
            display: inline-flex;
            flex-direction: row;

            .nav-toggle-button {
                margin: 24px;
                width: 24px;
                height: 20px;
                background: url("~@/assets/img/menu@1x.png") no-repeat center center;
                cursor: pointer;
            }

            .navigation {
                font-size: 16px;
                font-weight: 400;
                line-height: 64px;
            }
        }

        .quick-button-group {
            display: inline-flex;
            flex-direction: row;
            float: right;
            font-size: 14px;
            line-height: 64px;
            color: rgba(0, 0, 0, .65);
            cursor: default;

            .notification {
                margin-left: 14px;
                margin-right: 26px;
                cursor: pointer;
            }

            .logout {
                margin-right: 37px;
                cursor: pointer;
            }
        }
    }
</style>
